<template>
  <div class="content">
    <div class="left-section">
        <Introduce/>
    </div>
    <div class="center-section">
        <Center />
    </div>
    <div class="right-section">
        <BirdStatistics class="birdStatistics"/>
    </div>
  </div>
</template>
<script>
  import Center from '@/components/MultipleIndicators/Center.vue'
  import Introduce from '@/components/MultipleIndicators/Introduce.vue'
  import BirdStatistics from '@/components/MultipleIndicators/BirdStatistics.vue'
  import {EventBus} from "../utils/event-bus";
  export default {
    components: {
      Center,
        Introduce,
        BirdStatistics
    },
    data() {
      return {
          position:{lon:121.446162, lat:31.147243,zoom:16.8}
      }
    },
      mounted() {
          EventBus.$emit('set-position', this.position);
      }
  }
</script>
<style>
    .birdStatistics{
        width: 504px;
        position: absolute;
        bottom: 0;
    }
</style>
